<template>
  <div>
    <!-- 采购单详情 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">采购单详情</el-button>
      </div>
    </div>
    <div class="details">
      <div class="title_right">
        已审核、已报价、未采取的面板展示。本提示不计算页面布局
      </div>
      <div class="title_da">采购单详情</div>

      <!-- 表格 -->
      <div class="h3">采购商品</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column
          prop="date"
          label="商品名称"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="商品分类"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="采购量"
          width="242"
          align="center"
        />
        <el-table-column prop="name" label="单位" width="242" align="center" />
        <el-table-column
          prop="name"
          label="目标单价"
          width="242"
          align="center"
        />
        <el-table-column prop="address" label="采购周期" align="center" />
      </el-table>

      <div class="h3">采购需求</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column
          prop="date"
          label="商品名称"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="商品分类"
          width="242"
          align="center"
        />
        <el-table-column
          prop="date"
          label="采购量"
          width="242"
          align="center"
        />

        <el-table-column prop="address" label="采购周期" align="center" />
      </el-table>

      <div class="h3">采购联系人</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column prop="date" label="商品名称" align="center" />
        <el-table-column prop="date" label="商品分类" align="center" />
      </el-table>

      <div class="xian"></div>

      <div class="h3">报价信息</div>
      <el-table
        class="tab"
        :data="tableData"
        style="width: 90%"
        border
        :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
      >
        <el-table-column
          prop="date"
          label="产品图片"
          align="center"
          width="120"
        />
        <el-table-column
          prop="date"
          label="报价有效期"
          align="center"
          width="100"
        />
        <el-table-column
          prop="date"
          label="交货期限"
          align="center"
          width="100"
        />
        <el-table-column
          prop="date"
          label="是否含税"
          align="center"
          width="100"
        />
        <el-table-column
          prop="date"
          label="是否含运费"
          align="center"
          width="100"
        />
        <el-table-column
          prop="date"
          label="报价人姓名"
          align="center"
          width="120"
        />
        <el-table-column
          prop="date"
          label="报价人电话"
          align="center"
          width="120"
        />
        <el-table-column
          prop="date"
          label="收货地"
          align="center"
          width="100"
        />
        <el-table-column
          prop="date"
          label="报价日期"
          align="center"
          width="110"
        />
        <el-table-column prop="date" label="备注" align="center" width="280" />
        <el-table-column fixed="right" label="操作">
          <template #default>
            <el-button link type="primary" @click="handleClick"
              >再次报价</el-button
            >
            <el-button link type="primary">采取报价</el-button>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="footer">
        <el-button class="btn" style="background-color: #fff">取消</el-button>
        <el-button type="danger" class="btn" style="background: #ff4848">
          删除
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import top from "../../../components/top/top.vue";
// css
import "../../../assets/css/size.css";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove",
  },
];

// 按钮
const handleClick = () => {
  console.log("click");
};
</script>

<style lang="scss" scoped>
.details {
  // width: 1610px;
  height: 930px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  margin: 10px 0 0 10px;

  .title_right {
    width: 432px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
    float: right;
    margin: 20px 25px 0 0;
  }
  .title_da {
    width: 190px;
    height: 38px;
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    opacity: 1;
    margin: 0 auto;
    padding: 20px;
  }
  .tab {
    margin: 10px 60px 20px 80px;
  }
  .h3 {
    width: 80px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    border-left: 3px solid #acacac;
    margin: 0 0 20px 80px;
    padding-left: 5px;
  }
  .xian {
    // width: 1610px;
    height: 1px;
    background: #dcdfe5;
    opacity: 1;
    border-radius: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .footer {
    // width: 1610px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    opacity: 1;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
}
</style>
